<template>
  <BaseView id="setting">
    <template v-slot:header>
      <!-- 头部 -->
      <BaseHeader
        :title="$t('setting')"
        :rightIcon="null"
        @leftClick="$router.goBack()"
      />
    </template>
    <div class="card">
      <BaseCell
        :class="['oneset', { last: list.last }]"
        v-for="(item, index) in list"
        :key="index"
        :left="item.left"
        :desc="item.desc"
        :right="item.right"
        :arrow="item.arrow"
        :switch="item.switch"
        :border="item.border"
        :hide="item.hide"
        :disable="item.disable"
        @click="handleCellClick(item.id)"
      >
      </BaseCell>
    </div>
    <template v-slot:popup>
      <!-- 恢复出厂设置 -->
      <ConfirmBox
        :state="popupShow === 'resetConfirm'"
        :btnName="[$t('no'), $t('yes')]"
        slotAlign="center"
        @confirm="setReset"
        @cancel="hidePopup"
      >
        {{ $t("if_reset") }}
      </ConfirmBox>
      <ConfirmBox
        :state="popupShow === 'resetTip'"
        :btnName="[, $t('known')]"
        :cancelShow="false"
        slotAlign="center"
        @confirm="hidePopup"
      >
        {{ $t("can_not_reset") }}
      </ConfirmBox>
      <!-- 删除设备 -->
      <ConfirmBox
        :state="isShowDeleteComfirm"
        :btnName="[$t('no'), $t('delete_device_btn')]"
        slotAlign="center"
        :confirmTextColor="'var(--emui_functional_red)'"
        @confirm="sureDeleteDevice"
        @cancel="cancelDeleteDevice"
      >
        {{ $t("if_delete_device") }}
      </ConfirmBox>
      <BaseLoading :state="popupShow === 'reseting'">
        {{ $t("reseting") }}
      </BaseLoading>
    </template>
  </BaseView>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import ConfirmBox from "@/components/ComConfirmBox.vue";
import ComSelectPicker from "@/components/ComSelectPicker.vue";

export default {
  name: "Setting",
  components: {
    ConfirmBox,
    ComSelectPicker,
  },
  data() {
    return {
      popupShow: 0,
      isShowDeleteComfirm: false,
    };
  },
  computed: {
    list() {
      return [
        {
          // 设备名称
          id: 0,
          left: this.$t("deviceName"),
          right: this.devName,
          arrow: false,
        },
        {
          // 设备信息
          id: 1,
          left: this.$t("deviceInfo"),
          right: "",
          arrow: true,
        },
        {
          // 恢复出厂设置
          id: 2,
          left: this.$t("factoryDataReset"),
          right: "",
          arrow: true,
          hide: this.role === "family",
          disable: !this.canControl,
        },
        {
          // 删除设备 只有未连接的情况下才能删除
          id: 3,
          left: this.$t("deleteEquipment"),
          right: "",
          arrow: true,
          hide: this.role === "family",
        },
        {
          // 固件升级
          id: 4,
          left: this.$t("otaUpgrade"),
          arrow: true,
          border: false,
          disable: !this.canControl, // 行车过程中不能升级
          hide: this.role === "family", // 共享用户不能升级
        },
      ];
    },
    ...mapState(["motorLock", "battery", "role", "isShare", "devName"]),
    ...mapState({
      defenceSwitch: (state) => state.defenceSwitch.on,
      startMode: (state) => state.startMode.mode - 1,
      autocruiseSwitch: (state) => state.autocruiseSwitch.on,
      speedUnit: (state) => state.mileageMode.mode,
      status: (state) => state.status.status,
    }),
    ...mapGetters(["canControl"]),
  },
  methods: {
    ...mapActions([
      "sendCommand",
      "clearBleRegInfo",
      "deleteDeviceFromCloud",
      "finishDeviceActivity",
      "jumpTo",
    ]),
    handleCellClick(id) {
      switch (id) {
        case 1: // 设备信息
          this.$router.push("deviceInfo");
          break;
        case 2: // 恢复出厂设置
          // 未连接蓝牙
          if (!this.canControl) {
            this.hidePopup();
            this.$toast(this.$t("device_not_connect"));
            return;
          }
          // this.popupShow = this.defenceSwitch ? 'resetTip' : 'resetConfirm'
          this.popupShow = "resetConfirm";
          break;
        case 3: // 删除设备
          if (this.$store.state.isShare === true) {
            this.$toast(this.$t("isShareDesc"));
            return;
          }
          this.isShowDeleteComfirm = true;
          break;
        case 4: // 固件升级
          //当前设备是共享设备
          this.jumpTo("com.huawei.smarthome.deviceBleUpgradeActivity");
          break;
      }
    },
    hidePopup() {
      this.popupShow = 0;
    },
    // 恢复出厂设置
    async setReset() {
      // todo:确定删除先后顺序
      this.popupShow = "reseting";
      // 下发重置
      let reset = await this.sendCommand({
        data: {
          sid: "factoryReset",
          data: {
            on: 1,
          },
        },
      });
      console.hLog("reset:", reset);
      if (reset && reset.errcode) {
        this.hidePopup();
        this.$toast(this.$t("reset_fail"));
        return;
      }
      // 删除蓝牙信息
      let clear = await this.clearBleRegInfo();
      console.hLog("clear:", clear);
      if (clear && clear.errcode) {
        this.hidePopup();
        this.$toast(this.$t("reset_fail"));
        return;
      }
      // 删除云端设备
      let delDev = await this.deleteDeviceFromCloud();
      console.hLog("deleteDeviceFromCloud:", delDev);
      if (delDev && delDev.errcode) {
        this.hidePopup();
        this.$toast(this.$t("reset_fail"));
        return;
      }
      this.finishDeviceActivity();
    },
    cancelDeleteDevice() {
      this.isShowDeleteComfirm = false;
    },
    sureDeleteDevice() {
      this.isShowDeleteComfirm = false;
      // 是否需要增加loading
      this.deleteDeviceFromCloud().then(() => {
        this.finishDeviceActivity();
      });
    },
  },
  created() {
    window.hilink.setTitleVisible(false, "window.Ag.setTitleVisible");
    window.Ag.setTitleVisible = (res) => {};
    // 重置物理返回键
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.push("/");
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");
#setting {
  .card {
    align-self: stretch;
    .cardStyle();
    margin-top: 0.8rem;
    padding: 0.4rem 0;
    .switch {
      width: 4rem;
      height: 2rem;
      background-image: var(--ic_switch_off);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;
      &.on {
        background-image: var(--ic_switch_on);
      }
    }
  }
}
// 适配
.pad {
  #setting {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>